<template>
	<div class="wallet-select-bank text-left">
		<base-dropdown
			:options="options"
			v-model:show="dropdownShow"
			:modelValue="modelValue"
			@select="onSelect"
			:disabled="disabled"
			@unableTrigger="emits('unableTrigger')"
			wrapClass="rounded-bl-[5px] rounded-br-[5px]"
			itemClass="hover:bg-bg-4 item w-full">
			<div
				class="cursor-pointer w-full h-[58px] relative flex flex-col justify-center my-auto !border-[2px] rounded-[10px] bg-bg-1 transition-all border-transparent pr-[12px]"
				:class="[{ '!border-primary': dropdownShow }, modifyClass]">
				<slot :selectedValue="{ modelValue }">
					<div class="h-5 flex items-center gap-[10px]">
						<template v-if="options[0]?.id === 'add' && !selectedValue.img">
							<base-image :src="options[0].img" class="w-[30px] aspect-square" />
						</template>
						<template v-else>
							<template v-if="!selectedValue.img"></template>
							<template v-else-if="!!selectedValue?.type">
								<base-image
									:src="selectedValue.img"
									:type="selectedValue.type"
									class="w-[30px] aspect-square" />
							</template>

							<template v-else>
								<base-image :src="selectedValue.img" class="w-[30px] aspect-square no-type" />
							</template>
						</template>

						<div class="flex-1" :class="{ relative: !labelFloat, 'ml-1': slots.prefix }">
							<div class="w-[246px]" :class="selectedClass">
								{{
									selectedValue?.textDisplay ||
									selectedValue?.text ||
									options[0]?.textDisplay ||
									options[0]?.text
								}}
							</div>
							<div class="text-sm text-t-2 w-[246px]" v-if="selectedValue.content">
								{{ selectedValue.content }}
							</div>
							<base-text
								:text="label"
								:textT="labelT"
								class="absolute top-0 left-0 transition-all pointer-events-none"
								:class="[
									labelFloat ? 'text-xs' : 'text-base',
									dropdownShow ? 'text-primary' : 'text-t-3'
								]" />
						</div>
						<base-icon
							name="down1"
							class="text-t-2 text-sm duration-300"
							:class="{
								'rotate-180': dropdownShow
							}" />
					</div>
				</slot>
			</div>
			<template #content="{ item }">
				<div class="flex items-center gap-4 w-full">
					<div
						v-if="item.id === 'add'"
						@click.stop="onClickAdd"
						class="flex items-center gap-4 w-full">
						<base-icon name="jia" class="text-[30px]" />
						<p>{{ item.text }}</p>
					</div>
					<template v-else>
						<template v-if="item.type">
							<base-image :src="item.img" :type="item.type" class="w-[30px] aspect-square" />
						</template>

						<template v-else>
							<base-image :src="item.img" class="w-[30px] aspect-square no-type" />
						</template>

						<div class="text-sm flex-1">
							<p>{{ item.text }}</p>
							<div class="flex items-center gap-2" v-if="item.content">
								<p class="text-ellipsis max-w-[300px] overflow-hidden">{{ item.content }}</p>
								<base-copy :value="item.content" class="w-[14px]" />
							</div>
						</div>

						<button
							v-if="ableDeleted"
							class="delete-btn bg-transparent"
							@click.stop="onClickRemove(item.id)">
							<span class="bg-bg-3 text-center rounded-full aspect-square">
								<base-icon name="close" class="text-sm text-bg-4 p-[2px]" />
							</span>
						</button>

						<base-icon
							v-else
							name="tick"
							size="18"
							:class="[{ '!block': modelValue === item.id }, 'text-primary hidden']" />
					</template>
				</div>
			</template>
		</base-dropdown>
		<div class="h-[18px] flex items-center pt-2">
			<base-input-error :text="error" :textT="errorT" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, useSlots, computed } from 'vue'
import { t, getTextTById, getTextById } from '@/utils'
import {
	BaseText,
	BaseIcon,
	BaseDropdown,
	BaseInputError,
	BaseImage,
	BaseCopy
} from '@/components/base'
import { DropdownItemType } from '@/components/base/dropdown/index.vue'
import { ImagePropsType } from '@/components/base/image/index.vue'

const props = defineProps({
	modelValue: {
		type: [String, Number],
		required: true
	},
	options: {
		type: Array<DropdownItemType>,
		default: () => []
	},
	label: {
		type: String
	},
	labelT: {
		type: String
	},
	error: {
		type: String
	},
	errorT: {
		type: String
	},
	disabled: {
		type: Boolean,
		default: false
	},
	ableDeleted: {
		type: Boolean,
		default: true
	},
	modifyClass: {
		type: String,
		default: 'pl-[12px]'
	},
	placeholder: {
		type: String
	},
	selectedClass: {
		type: String
	}
})

const emits = defineEmits(['update:modelValue', 'delete', 'add', 'select', 'unableTrigger'])

const slots = useSlots()

const labelFloat = computed(() => props.modelValue || dropdownShow.value)

const selectedValue: any = computed((): DropdownItemType<ImagePropsType['type']> => {
	let text: string = ''
	if (props.options.length) {
		if (props.options[0].textT) {
			text = t(getTextTById(props.options, props.modelValue))
		} else {
			text = t(getTextById(props.options, props.modelValue))
		}
	}
	if (String(props.modelValue)) {
		const item = props.options?.find((val) => val.id === props.modelValue)
		return { ...item, text: text }
	} else {
		if (props.options.length === 1) {
			return { ...props.options[0], text: text }
		} else {
			return {
				text: props.placeholder,
				img: ''
			}
		}
	}
})

const dropdownShow = ref(false)

const onSelect = (val: string | number) => {
	console.log('val = ', val)
	emits('update:modelValue', val)
}

const onClickAdd = () => {
	emits('add')
}

const onClickRemove = (val: string | number) => {
	emits('update:modelValue', val)
	emits('delete', val)
}
</script>

<style lang="scss">
.item:hover {
	.delete-btn {
		display: block;
	}
}
.delete-btn {
	display: none;
}
</style>
